<!--
 * @Description: 企业认证公函
 * @version: 电子名片2.0
 * @Author: 付小清
 * @Date: 2020-11-21 09:51:41
 * @LastEditors: 尹鑫
 * @LastEditTime: 2020-12-26 10:26:54
-->

<template>
  <div class="certiFicationLetter">
    <el-form :size="size" label-width="120px" style="padding-top:30px">
      <el-form-item label="企业认证公函：">
        <el-button size="small" type="primary">
          选取文件
          <input class="file-btn" type="file" @change="handleFileSelect">
        </el-button>
        <p style="margin-left:10px;line-height:20px;font-size:12px;color:#999">{{ fileName }}</p>
        <div class="sub-tips">文件格式支持：.docx 为后缀的 word 文件</div>
      </el-form-item>
    </el-form>
    <div
      v-if="pram.ENTERPRISE_AUTHENTICATION_SETTING_ALL"
      class="content"
      v-html="pram.ENTERPRISE_AUTHENTICATION_SETTING_ALL"
    />
    <div style="width:100%;text-align:center">
      <el-button type="primary" style="margin-top:30px" @click="submitUpload()">保存</el-button>
    </div>
  </div>
</template>

<script>

// 接口
import { getCommonConfig, fileUpload, updateCommonConfig } from '@/api/basics'

// 载入world转HTML 插件
const mammoth = require('mammoth')
export default {
  name: 'CertificationLetter',
  data() {
    return {
      file: '',
      fileName: '',
      code: 'ENTERPRISE_AUTHENTICATION_SETTING',
      pram: {
        ENTERPRISE_AUTHENTICATION_SETTING_URL: '',
        ENTERPRISE_AUTHENTICATION_SETTING_ALL: '',
        ENTERPRISE_AUTHENTICATION_SETTING_TITLE: '',
        ENTERPRISE_AUTHENTICATION_SETTING_CONTENT: ''
      }
    }
  },
  computed: {
    size() {
      return this.$store.getters.size
    }
  },
  mounted() {
    this.initRequest()
  },
  methods: {
    // 初始化页面内容接口
    initRequest() {
      getCommonConfig({ id: this.code }).then((res) => {
        for (const i in res.data) {
          if (res.data[i].settingCode === 'ENTERPRISE_AUTHENTICATION_SETTING_ALL') {
            // 回显内容
            this.pram.ENTERPRISE_AUTHENTICATION_SETTING_ALL =
              res.data[i].settingContent
          // } else if (
          //   res.data[i].settingCode === 'ENTERPRISE_AUTHENTICATION_SETTING_URL'
          // ) {
          //   this.fileName = res.data[i].settingContent
          }
        }
      })
    },
    // 提交内容
    submitUpload() {
      if (this.file) {
        const formData = new FormData()
        formData.append('file', this.file)
        // 上传文件
        fileUpload(formData).then((res) => {
          this.pram.ENTERPRISE_AUTHENTICATION_SETTING_URL = res.data.url
          if (res.code === 0) {
            // 对数据进行重组改成后端需要的数据格式
            const formData = {
              code: this.code,
              content: '',
              settings: []
            }
            // 循环参数,后端数据结构
            for (const i in this.pram) {
              formData.settings.push({
                settingCode: i,
                settingContent: this.pram[i],
                settingGroup: this.code
              })
            }
            // 更新数据
            updateCommonConfig(formData, {headers: {files: [res.data.id]}}).then((res) => {
              if (res.code === 0) {
                this.$message.success('修改成功')
              }
            })
          }
        })
      } else {
        this.$message({
          message: '请选择要上传的文件',
          type: 'warning'
        })
      }
    },
    // 文件选择
    handleFileSelect(event) {
      this.readFileInputEventAsArrayBuffer(event, (arrayBuffer) => {
        console.log(arrayBuffer)
        mammoth
          .convertToHtml({ arrayBuffer: arrayBuffer })
          .then(this.displayResult)
          .done()
      })
    },
    // 处理完成的内容进行绑定
    displayResult(result) {
      this.pram.ENTERPRISE_AUTHENTICATION_SETTING_ALL = result.value
      const regH = /<h.>(.+?)<\/h.>/g // 去掉H标签和内容
      const regP = /<p>(.+?)<\/p>/g // 去掉P标签和内容
      const regE = /<\/?.+?\/?>/g // 去掉H标签
      const hTitle = result.value.replace(regP, '')
      const pContent = result.value.replace(regH, '')
      this.pram.ENTERPRISE_AUTHENTICATION_SETTING_TITLE = hTitle.replace(
        regE,
        ''
      )
      this.pram.ENTERPRISE_AUTHENTICATION_SETTING_CONTENT = pContent
    },
    // 对选择的文件进行预处理
    readFileInputEventAsArrayBuffer(event, callback) {
      var file = event.target.files[0]
      if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
        this.file = file
        this.fileName = file.name
        var reader = new FileReader()
        reader.onload = function(loadEvent) {
          var arrayBuffer = loadEvent.target.result
          callback(arrayBuffer)
        }
        reader.readAsArrayBuffer(file)
      } else {
        this.$message({ message: '请上传以 .docx 为后缀的 word 文件', type: 'error' })
      }
    }
  }
}
</script>

<style lang="scss">
.certiFicationLetter{
  width: 1000px;
  margin: 0 auto;
}
.content {
  width: 1000px;
  padding: 20px 20px 30px;
  background-color: #fff7ea;
  border: 1px solid #f6e8cb;
  font-size: 16px;
  line-height: 30px;
  h1 {
    font-size: 14px;
    // text-align: center;
  }
  p {
    font-size: 12px;
  }
}
.file-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0;
}
</style>
